<template>
  可以使用 slot 自定义扩展列 <br>
  <!--表单控件-->
  <nf-grid
    v-grid-drag="gridMeta"
    v-bind="gridMeta"
    :dataList="dataList"
    :selection="selection"
    size="small"
  >
    <!--普通字段，用字段名作为插槽的名称-->
    <template #header_text>
      扩展表头
    </template>
    <template #text="scope">
      <div style="display: flex; align-items: center">
        <el-icon><timer /></el-icon>
        <span style="margin-left: 10px">扩展1：{{ scope.row.text }}</span>
      </div>
    </template>
    <!--普通字段-->
    <template #week="scope">
      <span style="margin-left: 10px">{{ scope.row.week.replace('-w','年 第') + '周' }}</span>
    </template>
    <!--操作按钮-->
    <template #option="scope">
      <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
      <el-button
        size="small"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
  </nf-grid>

</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { Timer } from '@element-plus/icons-vue'
  // import type { DebuggerEvent, Component} from 'vue'
  import { nfGridSlot, createDataList } from '../../../lib/main'
  import _gridMeta from './grid.json'
  import _formMeta from '../form/form.json'

  import { EAlign } from '../../../lib/types/enum'
  import type { IGridSelection, IGridItem } from '../../../lib/types/50-grid'
 
  // 自定义指令
  import { _gridDrag } from '../../../lib/main'
  
  export default defineComponent({
    name: 'nf-elp-grid-slot-page',
    directives: {
      gridDrag: _gridDrag
    },
    components: {
      Timer,
      nfGrid: nfGridSlot
    },
    props: {
      moduleID: { // 模块ID
        type: [Number, String],
        default: 1 
      }
    },
    setup(props, ctx) {
      // console.log('读取的 json：', _gridMeta)
      const gridMeta = reactive(_gridMeta)

      // 设置列的先后顺序和是否显示
      gridMeta.gridMeta.colOrder = [90, 100, 113, 101, 102, 105, 115, 116, 120,121,150, 2000]

      // 设置一个操作按钮列
      const optionCol: IGridItem = {
        id: 2000,
        colName: "option",
        label: "操作",
        width: 180,
        fixed: EAlign.right,
        align: EAlign.center,
        headerAlign: EAlign.center
      }

      gridMeta.itemMeta['2000'] = optionCol

      const selection = reactive<IGridSelection>({
        dataId: '', // 单选ID number 、string
        row: {}, // 单选的数据对象 {}
        dataIds: [], // 多选ID []
        rows: [] // 多选的数据对象 []
      })

      // 根据 meta 创建表单的 model
      const _dataList = createDataList(_formMeta.itemMeta, 10).reverse()

      const dataList = reactive(_dataList)

      const handleEdit = (index: number, row: any) => {
        console.log(index, row)
      }
      const handleDelete = (index: number, row: any) => {
        console.log(index, row)
      }

      return {
        handleEdit,
        handleDelete,
        dataList,
        selection,
        gridMeta
      }
    }
  })

</script>